<template>
	<view class="order">
		<view class="cu-form-group">
			<view class="title">姓名</view>
			<input placeholder="输入姓名" name="input" v-model="orderData.orderName"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">手机号码</view>
			<input placeholder="输入手机号码" name="input" v-model="orderData.orderPhone"></input>
		</view>
		<view class="cu-form-group align-start">
			<view class="title">备注</view>
			<textarea maxlength="-1" placeholder="输入备注" v-model="orderData.orderIntroduce"></textarea>
		</view>
		<view style="align-self: center;">
			<view class="button" @click="finish">完成预约</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				orderData: {
					orderName: '',
					orderPhone: '',
					orderIntroduce: '',
					regionId: ''
				}
			};
		},
		computed: {
			userInfo() {
				return this.$store.getters['getUserInfoData']
			}
		},
		onLoad({
			regionId
		}) {
			this.orderData.regionId = regionId
			if (JSON.stringify(this.userInfo) != '{}') {
				this.orderData.orderName = this.userInfo.userName
				this.orderData.orderPhone = this.userInfo.userPhone
			}
		},
		methods: {
			finish() {
				this.$api.addOrder(this.orderData).then(res => {
					if (res.code) {
						this.$store.commit('setOrderData', res.data)
						setTimeout(async () => {
							let {
								orderState
							} = this.$store.getters['getOrderData'];
							if (orderState == 1) {
								this.$comm.errorToShow('你的预约已经过期')
								this.$store.commit('setOrderData', {})
								this.$store.commit('setRegionState', {
									regionId: this.orderData.regionId,
									regionState: '空闲'
								})
							}
						}, 60*10 * 1000)
						this.$comm.switchTabTo('/pages/index/index')
						this.$comm.successToShow("预约成功", () => {
							this.$store.commit('setRegionState', {
								regionId: this.orderData.regionId,
								regionState: '已预约'
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f6f6f6;
		// background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;

	}

	.order {


		.button {
			width: 171px;
			height: 44px;
			color: rgba(255, 255, 255, 1);
			background-color: rgba(64, 169, 255, 1);
			border-radius: 20px;
			font-size: 20px;
			line-height: 150%;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 0;
			left: 0;
			margin: auto;
			position: fixed;
			bottom: 200upx;
		}
	}
</style>
